<template>
  <view class="page bg-white">
    <view class="main">
      <view class="logo">
        <image src="/static/image/img-login-logo.png" mode="widthFix" style="width:200rpx;height:260rpx;"></image>
      </view>
      <u-form labelWidth="120rpx" labelStyle="font-size: 32rpx;color:#333;">
        <u-form-item label="账号" class="form-item">
          <u-input border="none" placeholderClass="text-lg" fontSize="28rpx" v-model="username"
            placeholder="请输入手机号码"></u-input>
        </u-form-item>
        <u-form-item label="验证码" class="form-item">
          <u-input border="none" placeholderClass="text-lg" fontSize="28rpx" v-model="smsCode" placeholder="请输入验证码">
            <template #suffix>
              <u-text size="28rpx" :text="isSendCode ? seconds + '秒后重新获取' : '获取验证码'" type="primary"
                @click="getCode"></u-text>
            </template>
          </u-input>
        </u-form-item>
        <view class="margin-top-lg" style="margin-bottom: 0;">
          <u-button customStyle="fontSize: 32rpx;" shape="circle" size="large" type="primary" text="登录"
            @click="login"></u-button>
        </view>
        <u-form-item class="padding-left-sm">
          <u-checkbox shape="circle" v-model="isAgree">
            <template #label>
              <text class="text-muted">登录即代表您同意</text>
              <text style="color:#0060E6">《用户协议》</text>
              <text class="text-muted">和</text>
              <text style="color:#0060E6">《隐私政策》</text>
            </template>
          </u-checkbox>
        </u-form-item>
      </u-form>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
const username = ref('')
const smsCode = ref('')
const seconds = ref(60)
const isSendCode = ref(false)
const isAgree = ref(false)
const getCode = () => {
  if (isSendCode.value) {
    return
  }
  setInterval(() => {
    if (seconds.value <= 0) {
      isSendCode.value = false
      seconds.value = 0
    } else {
      seconds.value--
      isSendCode.value = true
    }
  }, 1000)
}

const login = () => {
  uni.navigateTo({
    url: '/pages/common/changeRole/index'
  })
}

</script>
<style scoped lang="scss">
.logo {
  text-align: center;
  margin-bottom: 52rpx;
}

.form-item {
  border-radius: 50rpx;
  background: #F7F7F7;
  padding: 0 30rpx;
  margin-top: 48rpx;
}
</style>